<!-- @FileDescription: 图标设计组件 -->
<template>
  <el-container>
    <el-header>
      <el-input
        v-model="queryText"
        type="text"
        placeholder="请输入关键词搜索"
        @keyup.enter.native="doSearch"
        clearable
        @clear="cancelSearch"
      >
        <template #append>
          <el-button @click="doSearch">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </el-header>
    <el-main>
      <SimpleTable
        :columns="columns"
        :data="tableData"
        :pagination="page"
        :show-check-box="false"
        :height="tableHeight"
        :show-operation-column="true"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        table-size="small"
        table-width="100% !important"
      >
        <template #table_operation="{ scope }">
          <el-button @click="selectRecord(scope.row)">
            <el-icon>
              <Check />
            </el-icon>
            选择
          </el-button>
        </template>
      </SimpleTable>
    </el-main>
  </el-container>
</template>

<script>
import { setColumnFormatter } from '@/utils/util'
import SimpleTable from '@/components/simpleTable'
// import {refFieldQuery} from '@/api/crud'

export default {
  components: {
    SimpleTable
  },
  props: {
    entity: String,
    refField: String,
    extraFilter: String, // 查询条件
    tableHeight: {
      type: String,
      default: '480px'
    }
  },
  name: 'ReferenceSearchTable',
  data() {
    return {
      idField: null,
      nameField: null,
      queryText: '',
      columns: [],
      tableData: [],
      page: {
        pageNo: 1,
        limit: 15,
        sizes: [15, 20, 30],
        total: 0
      }
    }
  },

  mounted() {
    // TODO  调接口
    // this.loadTableTable()
  },

  methods: {
    // 改变分页大小处理
    handleSizeChange(val) {
      this.page.limit = val
      this.loadTableTable()
    },

    // 翻页处理
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.loadTableTable()
    },

    loadTableTable() {
      refFieldQuery(this.entity, this.refField, this.page.pageNo, this.page.limit, this.queryText, this.extraFilter)
        .then((res) => {
          if (res.error != null) {
            this.$message({ message: res.error, type: 'error' })
          } else {
            this.idField = res.data.idFieldName
            this.nameField = res.data.nameFieldName
            let columnList = res.data.columnList
            columnList.forEach((cl) => {
              setColumnFormatter(cl)
            })
            this.columns = columnList
            this.tableData = res.data.dataList
            this.page.total = res.data.pagination.total
          }
        })
        .catch((res) => {
          this.$message({ message: res.error, type: 'error' })
        })
    },

    selectRecord(row) {
      this.$emit(
        'recordSelected',
        {
          id: row[this.idField],
          label: row[this.nameField]
        },
        row
      )
    },

    doSearch() {
      this.loadTableTable()
    },

    cancelSearch() {
      this.loadTableTable()
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-header) {
  padding: 0 12px;
}

:deep(.el-main) {
  padding: 6px;
}
</style>
